<template>
  <div id="app">
    <Tou></Tou>
    <table class="table_">
      <tr>
        <th style="display: flex; width: 326px; margin: 66px 0 0 66px">
          <h2 style="color: grey">我的订单</h2>
          <span style="font-size: 10px; color: grey; line-height: 50px"
            >请谨防钓鱼链接或诈骗电话，了解更多》</span
          >
        </th>
        <th>
          <el-input
            v-model="mail.qq"
            placeholder="请输入订单号"
            class="input-with-select"
          >
          </el-input>
        </th>
        <th>
          <el-button>
            <Search style="width: 38px; height: 26px" />
          </el-button>
        </th>
      </tr>
      <table class="table_3" v-for="gwc in gwces" :key="gwc.gid">
        <tr v-if="gwc.gdd_hao">
          <td>
            <img
              :src="getAssetsFile(gwc.gimg)"
              style="width: 55px; float: left; margin-left: 66px"
            />
            <div style="line-height: 50px">
              {{ gwc.gname }}
              <p>
                单价:&nbsp;&nbsp;{{ gwc.gprice }}，数量:&nbsp;&nbsp;{{
                  gwc.gnum
                }}
              </p>
            </div>
          </td>
          <td v-for="d in getReplies(gwc.gdd_hao)">
            <p>{{ d.dd_name }}</p>
            <p>{{ gwc.gdd_hao }}</p>
            <p>{{ d.dd_date }}</p>
          </td>
          <td style="color: #a01f23; font-weight: bolder">已支付</td>
          <td>
            <img :src="getAssetsFile(gwc.dd.dd_zf)" style="width: 100px" />
          </td>
          <td style="color: #ee4727; font-weight: bolder">
            ￥{{ gwc.gprice * gwc.gnum }}
            <p>(包邮)</p>
          </td>
          <td>
            <!-- <el-button @click="dialogFormVisible = true">订单详细</el-button> -->
            <el-button
              type="danger"
              @click="getDd(gwc), (dialogFormVisible = true)"
              >评价</el-button
            >
          </td>
        </tr>
      </table>
    </table>

    <el-dialog
      style="width: 526px; margin: auto"
      title="评价"
      v-model="dialogFormVisible"
    >
      <el-form>
        <el-input type="textarea" v-model="p.pl_plnr" />
        <input type="file" @change="selectFile($event)" />
        <el-input type="hidden" v-model="p.pl_qq" />
        <el-input type="hidden" v-model="p.pl_sp_id" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="danger" @click="saveEdit()" dialogFormVisible="false"
          >提 交</el-button
        >
      </div>
    </el-dialog>
    <div style="background: #fff">
      <Like></Like>
      <Wei></Wei>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { getAssetsFile } from "../assets/img";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";
import "../assets/css/bootstrap.css";
import { file_, addPl, ddStrPager } from "../assets/index";
import Tou from "../views/tou.vue";
import Wei from "../views/wei.vue";
import Like from "../views/gwc_like.vue";

const mail: any = ref({});
const dd = ref({});
const gwc = ref({ dd: {} });
const gwc_ = ref([]);
const gwces = ref([]);
const dd_ = ref([]);
const dialogFormVisible = ref(false);
/**用户*/
const route = useRoute();
mail.value.qq = route.params.qq;
const Mail = () => {
  axios.get("http://127.0.0.1:1234/U/" + mail.value.qq).then((response) => {
    mail.value = response.data;
  });
};
Mail();

/**显示*/
const StuN = () => {
  axios.post("http://127.0.0.1:1234/G/spper", gwc.value).then((response) => {
    gwc_.value = response.data;
    gwces.value = gwc_.value.filter((g) => g.gqq == mail.value.qq);
    console.log(gwces.value);
  });
};
StuN();
const getReplies = (Dd_hao) => {
  return dd_.value.filter((d) => d.dd_hao === Dd_hao);
};

/**显示订单信息*/
const StuD = () => {
  axios.post("http://127.0.0.1:1234/Dd/spper", dd.value).then((response) => {
    dd_.value = response.data;
    console.log(dd_.value);
  });
};
StuD();
/**根据id获取订单详细*/
const getDd = (d) => {
  axios.get("http://127.0.0.1:1234/G/" + d.gid).then((response) => {
    gwc.value = response.data;
    console.log(gwc.value);
  });
};

watch(gwc, (newGwc) => {
  p.value.pl_qq = newGwc.dd.dd_qq;
  p.value.pl_sp_id = newGwc.cid;
});

var file = "";
const selectFile = (event: any) => {
  file = event.target.files[0];
  console.log(file);
};
let p: any = ref({ commodity: {}, mail: {} });
let form_data = new FormData();
const saveEdit = () => {
  // 添加学生
  form_data.append("file", file);
  file_(form_data).then((res) => {
    // 修改 ref 对象的值需要通过 .value 属性
    p.value.pl_img1 = res.data;
    addPl(p.value).then((res) => {
      if (res.data === 1) {
        ElMessage({
          message: "新添加商品成功！",
          type: "success",
        });
      } else {
        ElMessage.error("新添加商品失败！");
      }
    });
  });
};

//获取订单数据
// const query = reactive({
//   pageIndex: 1,
//   pageSize: 50,
// });
// const tableData = ref([]);
// const pageTotal = ref(0);
// let d = reactive({
//   dd_id: "",
// });
// const getD = () => {
//   ddStrPager(query, d).then((res) => {
//     tableData.value = res.data.list;
//     pageTotal.value = res.data.pageTotal || 50;
//     query.pageIndex = res.data.pageNum;
//     query.pageSize = res.data.pageSize;
//   });
// };
// getD();

// 查询操作
// const handleSearch = () => {
//   getD();
// };
</script>
<style scoped>
@import "../assets/css/TandW.css";
body {
  background-color: rgb(245, 245, 245);
}
.table_ {
  border: 3px solid #e7e7e7;
  border-collapse: collapse;
  margin: 0 auto;
  width: 1320px;
}
.table_ table tr {
  height: 188px;
  text-align: center;
}
.table_ .table_3 {
  width: 1126px;
  border-bottom: 2px solid #e7e7e7;
  margin: auto;
}
.table_3 td p {
  color: #999;
  font-size: 14px;
}
.table_4 {
  display: flex;
  width: 1120px;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.table_3_1 a {
  margin-right: 500px;
  color: #a01f23;
  text-decoration: underline;
  border-bottom: 2px solid #a01f23;
}
.table_3_2 {
  font-size: 12px;
  color: #666;
}
.table_5 {
  width: 1120px;
  line-height: 66px;
  height: 66px;
  background: #fff;
  margin-bottom: 66px;
}
.table_5_1 {
  display: flex;
  float: right;
  background: #fff;
}
.table_5_1_2 {
  width: 220px;
  height: 66px;
  list-style: 66px;
  background: #a01f23;
  font-weight: bolder;
  text-align: center;
  font-size: 24px;
}
.table_5_1 span {
  color: #a01f23;
  font-weight: bolder;
  margin-right: 20px;
}
.dialog-footer button:first-child {
  margin: 30px 20px 30px 200px;
}
.dialog-footer button {
  width: 88px;
}
</style>
